<template>
    <el-dialog
      :title="title"
      :close-on-click-modal="false"
      :visible.sync="visible"
      :before-close="cancel"
      class="JNPF-dialog JNPF-dialog_center"
      lock-scroll
      width="75%"
    >
      <el-row :gutter="15" class="">
        <el-form
          ref="elForm"
          :model="dataForm"
          :rules="rules"
          label-width="145px"
        >

          <el-col :span="8">
            <el-form-item class="required" label="设备名称" prop="FCATNAME">
              <el-input
                v-model="dataForm.FCATNAME"
                placeholder="请输入"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="设备类型" class="required" prop="FCATTYPE">
              <el-input
                v-model="dataForm.FCATTYPE"
                placeholder="请输入"
                clearable
                :disabled="!insertorupdate"
                maxlength="8"
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item class="required" label="设备型号" prop="FSPEC">
              <el-input
                v-model="dataForm.FSPEC"
                placeholder="请输入"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          
        </el-form>
      </el-row>

      <template>
     <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="一级保养" name="first">
        <el-table :data="list1" border stripe>
          <el-table-column label="操作" width="80">
            <template slot-scope="scope">
              <el-button slot="reference" icon="el-icon-delete" style="color: red" @click="shopdate(scope.$index)"
                type="text">删除</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="FENTRYID" label="序号" width="75" ></el-table-column>
          <el-table-column prop="FCATNO" label="保养项目编号" width="105"></el-table-column>
          <el-table-column prop="FCATNAME" label="保养项目名称" ></el-table-column>
          <el-table-column prop="FTIME" label="保养用时(小时)" width="105"></el-table-column>
          <el-table-column prop="FMEMO" label="备注" ></el-table-column>
        </el-table>
        <div class="addbox">
             <el-link icon="el-icon-plus" type="primary" >添加一行</el-link>
        </div>
      </el-tab-pane>
      <el-tab-pane label="二级保养" name="second">
        <el-table :data="list2" border stripe>
          <el-table-column label="操作" width="80">
            <template slot-scope="scope">
              <el-button slot="reference" icon="el-icon-delete" style="color: red" @click="shopdate(scope.$index)"
                type="text">删除</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="FENTRYID" label="序号" width="75" ></el-table-column>
          <el-table-column prop="FCATNO" label="保养项目编号" width="105"></el-table-column>
          <el-table-column prop="FCATNAME" label="保养项目名称" ></el-table-column>
          <el-table-column prop="FTIME" label="保养用时(小时)" width="105"></el-table-column>
          <el-table-column prop="FMEMO" label="备注" ></el-table-column>
        </el-table>
        <div class="addbox">
             <el-link icon="el-icon-plus" type="primary" >添加一行</el-link>
        </div>
      </el-tab-pane>

      <el-tab-pane label="三级保养" name="third">
        <el-table :data="list3" border stripe>
          <el-table-column label="操作" width="80">
            <template slot-scope="scope">
              <el-button slot="reference" icon="el-icon-delete" style="color: red" @click="shopdate(scope.$index)"
                type="text">删除</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="FENTRYID" label="序号" width="75" ></el-table-column>
          <el-table-column prop="FCATNO" label="保养项目编号" width="105"></el-table-column>
          <el-table-column prop="FCATNAME" label="保养项目名称" ></el-table-column>
          <el-table-column prop="FTIME" label="保养用时(小时)" width="105"></el-table-column>
          <el-table-column prop="FMEMO" label="备注" ></el-table-column>
        </el-table>
        <div class="addbox">
             <el-link icon="el-icon-plus" type="primary" >添加一行</el-link>
        </div>
      </el-tab-pane>
      <!-- <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane> -->
     </el-tabs>
    </template>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button  v-if="insertorupdate" type="primary" v-loading="loading">确 定</el-button>
        <el-button v-else type="primary"  v-loading="loading">修 改</el-button>
      </span>
    </el-dialog>
  </template>
  <script>
  import jnpf from "@/utils/jnpf"
  export default {
    props: {
      parelist: {
        type: Array,
        default: []
      },
    },
    data() {
      return {
          activeName: 'first',
          title:"新增",
          dataForm:{
            FCATNO: "100005",
            FCATNAME: "锡京通风柜T-19",
            FCATTYPE: "通风柜",
            FBRAND: "锡京",
            FSPEC: "2000-DT-90",
            FNOTE:"",
            FOPERATOR: "system",
            FUPDDATE: "2011-02-16T02:57:02.000+00:00"
          },
          rules: {
            FCATNO: [
                  { required: true, message: '请输入保养类型编号', trigger: 'blur' },
              ],
              FCATNAME: [
                  { required: true, message: '请输入保养类型名称', trigger: 'blur' },
              ],
          },
        fvisiblelist:[
          {id:"1",fullName:"是"},
          {id:"2",fullName:"否"},
        ],

        list1:[
          {FENTRYID:1,FCATNO:"101",FCATNAME:"抽风能力",FTIME:0.5,FMEMO:""},
          {FENTRYID:2,FCATNO:"102",FCATNAME:"设备运行是否正常",FTIME:0.5,FMEMO:""},
          {FENTRYID:2,FCATNO:"103",FCATNAME:"挡风玻璃是否清晰",FTIME:0.5,FMEMO:""},
        ],

        loading:false,
        visible:false,
        insertorupdate:true
      };
    },
    created() {
    },
    mounted() {},
    methods: {
      //
      init(id){
        this.dataForm.FCATNO= id || ''
          if(this.dataForm.FCATNO)
          {
              this.title="修改"
             this.insertorupdate=false;
          }
          else
          {
            this.insertorupdate=true;
              this.title="新增";
          }
          this.visible=true;
      },
      //
      cancel(){
          this.$refs.elForm.resetFields();
          this.visible=false;
      },
    },
  };
  </script>
  
  
  
  
  